<template>
	<view class="add bg_color">
		<view v-if="!isEnter">
			<view class="conten">
				<view class="tit">
					<view class="text">设施信息</view>
					<view class="xing">*</view>
				</view>
				<Form ref="formRef" :formList="formList" :formData="formData"></Form>
			</view>
			<view class="butt font28" @click="addItem">提交</view>
		</view>
		<SubmitState v-else :success="success" @successReturn="fanhui" @failReturn="isEnter = false"></SubmitState>
	</view>
</template>
<script setup>
import Form from 'com/Form.vue';
import SubmitState from 'com/modal/SubmitState.vue';
import Api from 'api';
import changeData from 'utils/changeData.js';
import { dictStore } from 'store/dicts.js';
const api = new Api
const store1 = dictStore();
const id = ref('');
const formRef = ref(null);
const isEnter = ref(false);
const success = ref('');
const formList = ref([
	{
		label: '设施名称',
		prop: 'facilityName',
		type: 'text',
		placeholder: '请输入设施名称',
		rules: [
			{
				required: true,
				message: '请输设施名称',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '设施类型',
		prop: 'facilityType',
		type: 'popup',
		placeholder: '请选择设施类型',
		columns: [],
		rules: [
			{
				required: true,
				message: '请选择设施类型',
				trigger: ['change', 'blur'],
				transform(value) {
					return String(value);
				}
			}
		]
	},
	{
		label: '设施状态',
		prop: 'facilityStatus',
		type: 'popup',
		placeholder: '请选择设施状态',
		columns: [],
		rules: [
			{
				required: true,
				message: '请选择设施状态',
				trigger: ['change', 'blur'],
				transform(value) {
					return String(value);
				}
			}
		]
	},
	{
		label: '是否可用',
		prop: 'enables',
		type: 'popup',
		placeholder: '请先选择设施状态',
		disabled:true,
		columns: [
			{
				name: '是',
				value: '1'
			},
			{
				name: '否',
				value: '2'
			}
		],
		rules: [
			{
				required: true,
				message: '请选择是否可用',
				trigger: ['change', 'blur'],
				transform(value) {
					return String(value);
				}
			}
		]
	},
	{
		label: '负责人',
		prop: 'chargePerson',
		placeholder: '请输入负责人',
		type: 'text',
		rules: [
			{
				required: true,
				message: '请输入负责人',
				trigger: ['change', 'blur']
			}
		]
	},

	{
		label: '联系方式',
		prop: 'phone',
		placeholder: '请输入联系方式',
		type: 'text',
		rules: [
			{
				required: true,
				message: '请输入联系方式',
				pattern: changeData.phonePattern,
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '所在地区',
		prop: 'province',
		type: 'picker',
		placeholder: '请选择所在地区',
		columns: [
			
		],
		rules: [
			{
				required: true,
				message: '请选择所在地区',
				trigger: ['change', 'blur'],
				transform(value) {
					return String(value);
				}
			}
		],
		format: '-'
	},
	{
		label: '地址',
		prop: 'place',
		type: 'textarea',
		placeholder: '请输入内容',
		rules: [
			{
				required: true,
				message: '请输入地址',
				trigger: ['change', 'blur']
			}
		]
	}
]);
onLoad(async (query) => {
	const res1 = await store1.getDict('facilities_type');
	formList.value[1].columns = res1;
	const res2 = await store1.getDict('facilityStatus');
	formList.value[2].columns = res2;
	if (query.id) {
		id.value = query.id;
		const res = await api.queryById('baseSecurityFacilities',{
			id: query.id
		});
		formData.value = res;
		uni.setNavigationBarTitle({
			title: '编辑实有安防设施'
		});
	} else {
		uni.setNavigationBarTitle({
			title: '新增实有安防设施'
		});
	}
});
const formData = ref({
	id: '',
	enables: '',
	province: '',
	place: '',
	facilityType: '',
	facilityName: '',
	facilityStatus: '',
	chargePerson: '',
	phone: ''
});
watch(()=>formData.value.facilityStatus,(newVal)=>{
	if(newVal != 3){
		formList.value[3].disabled = false
		formList.value[3].placeholder = '请选择是否可用'
		formData.value.enables = ''
	}else{
		formList.value[3].disabled = true
		formData.value.enables = 2
	}
})
const fanhui = () => {
	uni.navigateBack();
};
const addItem = () => {
	formRef.value.submit(async () => {
		let res;
		if (id.value) {
			res = await api.edit('baseSecurityFacilities', unref(formData));
		} else {
			res = await api.add('baseSecurityFacilities', unref(formData));
		}
		success.value = res;
		isEnter.value = true;
	});
};
</script>

<style lang="scss" scoped></style>
